<template>
  <div style="min-height: 700px">
    <a-breadcrumb style="margin: 16px 0">
      <a-breadcrumb-item
        ><router-link to="/">Home</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>登录</a-breadcrumb-item>
    </a-breadcrumb>

    <a-row type="flex" justify="center">
      <a-col :md="6" :sm="16" :xs="24">
        <a-card title="登录" class="login">
          <span slot="extra"
            >没有账号？<router-link to="/register" style="float:right"
              >注册</router-link
            ></span
          >
          <a-form layout="horizontal" :form="form" @submit="handleSubmit">
            <a-form-item label="邮箱">
              <a-input
                v-decorator="[
                  'email',
                  {
                    rules: [
                      { required: true, message: '请输入邮箱地址!' },
                      {
                        type: 'email',
                        message: '邮箱地址格式错误!'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item label="密码">
              <a-input-password
                v-decorator="[
                  'password',
                  {
                    rules: [{ required: true, message: '请输入密码!' }]
                  }
                ]"
                type="password"
              />
            </a-form-item>
            <div>
              <router-link to="/find_password" style="display:none;"
                >找回密码</router-link
              >
            </div>
            <a-button
              type="primary"
              block
              html-type="submit"
              :loading="loading"
            >
              登录
            </a-button>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      validate: {
        email: {
          status: "",
          help: ""
        }
      },
      loading: false
    };
  },
  created() {
    if (typeof this.user.name != "undefined") {
      this.$router.push("/dashboard");
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        this.loading = true;
        if (!err) {
          this.$axios
            .post(process.env.VUE_APP_BACKGROUND_API + "/api/login", values)
            .then(() => {
              this.$axios
                .get(process.env.VUE_APP_BACKGROUND_API + "/api/user")
                .then(response => {
                  this.$store.commit("setUser", response.data);
                  this.$router.push("/dashboard");
                });
              this.loading = false;
            })
            .catch(error => {
              this.loading = false;

              if (error.response) {
                if (error.response.status == 422) {
                  this.$message.error("账号/密码错误");
                } else {
                  this.$message.error(error.response.data.message);
                }
              } else {
                this.$message.error(error.message);
              }
            });
        } else {
          this.loading = false;
        }
      });
    }
  },
  computed: {
    user() {
      return this.$store.getters.user;
    }
  }
};
</script>

<style lang="scss">
.login {
  margin-top: 100px !important;
  .ant-form-item {
    margin-bottom: 5px;
    .ant-form-item-label {
      line-height: 24px;
    }
  }
  .ant-btn {
    margin-top: 15px;
  }
}
</style>
